<template>
  <div id="zb_app">
    <!-- {{$store.state.cart}} -->
    <div class="zb_container">
      <!-- 循环遍历商品 -->
      <ul v-for="(item,index) in $store.state.zb_cart" :key="index">
        <li>
          <input type="checkbox" v-model="item.checked" />
        </li>
        <li>
          <img v-lazy="item.pic" />
        </li>
        <li class="zb_a2">
          <p class="zb_title">{{item.name}}</p>
          <p style="color:red;">￥{{item.price}}</p>
          <p>库存{{item.num}}</p>
        </li>
        <li>
          <button class="btn btn-danger btn-sm" @click="zb_cut(item)">-</button>
          <span>{{item.number}}</span>
          <button class="btn btn-danger btn-sm" @click="zb_add(item)">+</button>
        </li>
      </ul>
      <!-- 循环遍历商品 -->
      <!-- 底部 -->
      <div class="zb_footer">
        <p>
          <!-- 全选绑定 -->
          全选:
          <input type="checkbox" @change="zb_checkAll" v-model="checked" />
        </p>
        <p>商品总价:￥{{$store.getters.zb_count}}元</p>
        <p>数量： {{this.$store.getters.zb_nums}}</p>
      </div>
      <!-- 底部 -->
    </div>
  </div>
</template>

<script>
//轮播图 懒加载
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);
//引入bottstrap样式
import "@/assets/bootstrap.css";
export default {
  // 组件名称
  name: "",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      checked: true //全选全不选
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    //数量减
    zb_cut(item) {
      var index = this.$store.state.zb_cart.findIndex((it, key) => {
        return it.id == item.id;
      });
      //如果当前的数量大于1 执行减1操作 如果数量等于1 题行是否要删除商品
      if (item.number == 1) {
        if (confirm("确定要删除商品吗?")) {
          //移除商品
          this.$store.commit("zb_remove", index);
        } else {
          return false;
        }
      } else {
        //数量减1
        this.$store.commit("zb_cutNum", index);
      }
    },
    //数量加
    zb_add(item) {
      var index = this.$store.state.zb_cart.findIndex((it, key) => {
        return it.id == item.id;
      });
      this.$store.commit("zb_addNum", index);
    },
    //控制全选和全不选的操作
    zb_checkAll() {
      console.log(event.target.checked);
      //获取当前全选按钮的状态
      let status = event.target.checked;
      //循环判断全选按钮的状态，然后让商品列表的复选框状态=全选按钮的状态
      //修改某项数据
      this.$store.state.zb_cart.map((item, index) => {
        //让购物车列表状态等于全选按钮选中状态
        item.checked = status;
      });
    }
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 在实例初始化之后，组件属性计算之前，如data属性等
   */
  beforeCreate() {},
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * 在挂载开始之前被调用：相关的 render 函数首次被调用。
   */
  beforeMount() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
   */
  beforeUpdate() {},
  /**
   * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
   */
  updated() {},
  /**
   * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
   */
  activated() {},
  /**
   * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
   */
  deactivated() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {}
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
#zb_app {
  width: 100%;
  height: 100%;
  ul {
    width: 100%;
    height: 110px;
    background: #f5f5f5;
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
      width: 50px;
    }
    img {
      width: 80px;
      height: 80px;
    }
    .zb_title {
      width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.zb_footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 80px;
  background: #f5f5f5;
}
</style>
